<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%--
  Created by IntelliJ IDEA.
  User: 旧人
  Date: 2018/12/19
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script type="text/javascript" src="/resources/jquery/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <link rel="stylesheet" href="/resources/layui/css/style.css">
    <script type="text/javascript" src="/resources/layui/layui.js"></script>
    <script>
        layui.use('form', function() {
            var form = layui.form;
        });
    </script>

</head>

<script>
    function changeThis(){
        //再访问一次验证码的Servlet
        //把img的src属性
        var imgObject=$("#verifyCode");
        imgObject.attr("src","/VerifyCode"+newUrl());
    }
    function newUrl(){
        var timestamp = (new Date()).valueOf();
        var url = "?timestamp="+timestamp;
        return url;
    }
</script>
<body class="login-body body">

<div class="login-box">
    <form class="layui-form layui-form-pane" method="post" action="/login" id="this_form">
        <div class="layui-form-item">
            <h3>图书馆登录系统</h3>
        </div>
        <br/>

        <div class="layui-form-item">
            <label class="layui-form-label">职位：</label>
            <div class="layui-input-inline">
                <select name="role" lay-verify="required">
                    <option value=""></option>
                    <c:forEach items="${roleList}" var="item">
                        <option value="${item.roleId}">${item.roleName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">账号：</label>
            <div class="layui-input-inline">
                <input type="text" name="username" class="layui-input" lay-verify="username" placeholder="账号"  onblur="checkUsername(this.value);"
                       maxlength="20" id="username"/>
                <span id="checkUsernameResult" style="color: red "></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>

            <div class="layui-input-inline">
                <input type="password" name="password" class="layui-input" lay-verify="password" placeholder="密码"
                       maxlength="20" id="password"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>

            <div class="layui-input-inline">
                <input type="text" name="code" class="layui-input" lay-verify="code" placeholder="验证码" >
                <img id="verifyCode"  alt="看不清，换一张" onclick="changeThis()" src="/VerifyCode">
            </div>
        </div>

        <div class="layui-form-item">
            <button type="reset" class="layui-btn layui-btn-danger btn-reset">重置</button>
            <button type="button" class="layui-btn btn-submit" lay-submit="" lay-filter="sub">立即登录</button>
        </div>
    </form>
</div>
<script type="text/javascript">

    function checkUsername(obj) {
        var username = obj;
        var checkUsernameResult = document.getElementById("checkUsernameResult");

        if (username.trim().length == 0) {
            checkUsernameResult.innerHTML = "用户名不能为空";
            obj.focus();
        } else {
            checkUsernameResult.innerHTML = "";
        }
    }

    layui.use(['form', 'layer'], function () {
        // 操作对象
        var form = layui.form,layer = layui.layer,$ = layui.jquery;

        // 验证
        form.verify({
            username: function (value) {
                if (value == "") {
                    return "请输入用户名";
                }
            },
            password: function (value) {
                if (value == "") {
                    return "请输入密码";
                }
            },

             code: function (value) {
                if (value == "") {
                    return "请输入验证码";
                }
            }
        });

        // 提交监听
        form.on('submit(sub)', function (data) {

            //提交表单
            $("#this_form").submit();
        });
    })

</script>
</body>
</html>
